<template>
  <div>
    <div class="navmenu">
        <div class="menutitle">ORDER聚造</div>
        <el-menu
        default-active="2"
        class="menu"
        @open="handleOpen"
        @close="handleClose"
        :router="true"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        >
 <el-submenu index="1">
                 <template slot="title">
                   <i class="el-icon-location"></i>
                   <span>首页管理</span>
                 </template>
               <el-menu-item-group>
               <el-menu-item index="/index/banners">轮播图管理</el-menu-item>
               <el-menu-item index="/index/category">分类区管理</el-menu-item>
               <el-menu-item index="/index/recomend">为你推荐管理</el-menu-item>
               <el-menu-item index="/index/categoryEdit">图片管理</el-menu-item>
               </el-menu-item-group>
               </el-submenu>
               <el-submenu index="2">
                 <template slot="title">
                   <i class="el-icon-location"></i>
                   <span>商品管理</span>
                 </template>
               <el-menu-item-group>
               <el-menu-item index="/index/fenlei">分类管理</el-menu-item>
               <el-menu-item index="/index/brand">品牌管理</el-menu-item>
               <el-menu-item index="/index/goods">商品管理</el-menu-item>
               <el-menu-item index="/index/personproduct">单品管理</el-menu-item>
               </el-menu-item-group>
               </el-submenu>
               <el-submenu index="3">
                 <template slot="title">
                   <i class="el-icon-location"></i>
                   <span>新闻管理</span>
                 </template>
               <el-menu-item-group>
               <el-menu-item index="/index/xinwen">新闻管理</el-menu-item>
               </el-menu-item-group>
               </el-submenu>
            </el-menu>
    </div>
    <div class="nav">
        <el-breadcrumb separator="/" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="">{{ $route.meta.title }}</a></el-breadcrumb-item>
        </el-breadcrumb>
        <div class="nav-right">
            <el-avatar :size="50" :src="photo"></el-avatar>
            <div class="nickName">
              <el-tooltip placement="bottom">
                <div slot="content" @click="dialogFormVisible=true">修改密码</div>
                <span>{{ nickName }}</span>
              </el-tooltip>
              <span>，您好！</span>
            </div>
            <el-button type="danger" size="small" round icon="el-icon-switch-button" @click="logout">退出</el-button>
        </div>
    </div>
    <router-view style="margin-left: 259px;margin-top: 23px"></router-view>
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="400px">
      <el-form :model="form" ref="form" :rule="rules" label-width="100px">
        <el-form-item label="原密码" prop="passWord">
          <el-input type="passWord" v-model="form.passWord"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassWord">
          <el-input type="passWord" v-model="form.newPassWord"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="reNewPassWord">
          <el-input type="passWord" v-model="form.reNewPassWord"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible=false">取消</el-button>
        <el-button type="primary" @click="changePassWord">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import md5 from 'js-md5'
export default {
  name: "index",
  props: {
    msg: String,
  },
  data() {
    return {
        photo: "",
        nickName: "",
        dialogFormVisible: false,
        form: {
          passWord: "",
          newPassWord: "",
          reNewPassWord: ""
        },
        rules: {
          passWord: [
            { required: true, message: '请输入原密码', trigger: 'blur' }
          ],
          newPassWord: [
            { required: true, message: '请输入新密码', trigger: 'blur' }
          ],
          reNewPassWord: [
            { required: true, message: '请再次输入新密码', trigger: 'blur' },
            { validate: (rule, value, callback) => {
              if(value === '') {
                callback(new Error('请再次输入密码'))
              } else if (value !== this.form.newPassWord) {
                callback(new Error('两次输入密码不一致'))
              } else {
                callback()
              }
            }, trigger: 'blur'}
          ]
        }
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    logout() {
      this.$confirm("是否退出登录？","提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning"
      }).then(() => {
        this.$http({
          url:"/admin/logout"
        }).then((res) => {
          if(res.errorMsg) {
            this.$message.error(res.errorMsg)
          } else {
            localStorage.removeItem('token')
            localStorage.removeItem('user')
            location.href = "#/login"
          }
        })
      }) 
    },
    changePassWord() {
      this.$refs.form.validate((valid) => {
        if(valid) {
          this.$http({
            url: '/admin/changePassWord',
            method: 'POST',
            data: {
              passWord: md5(this.form.passWord),
              newPassWord: md5(this.form.newPassWord)
            }
          }).then(res => {
            if(!res.errorMsg) {
              this.dialogFormVisible = false
              this.$message({
                message: '密码修改成功',
                type: 'success',
                duration: 3000
              })
              setTimeout(() => {
                location.href = '#/login'
              },3000)
            }
          })
        } else {
          return false
        }
      })
    }
  },
  created() {
    let user = localStorage.getItem("user");
    if (!user) {
      location.href = location.origin + "#/login";
    } else {
      user = JSON.parse(user);
      this.photo = user.photo;
      this.nickName = user.nickName || "管理员";
    }
  },
};
</script>

<style>
.navmenu {
    width: 221px;
    background-color: #545c64;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
}
.menutitle {
    height: 56px;
    line-height: 56px;
    vertical-align: middle;
    text-align: center;
    font-size: 19px;
    color: #FFFFFF;
}
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 39px;
}
.breadcrumb {
    margin-left: 259px;
}
.nav-right {
    display: flex;
    align-items: center;
}
</style>